import React from "react";
import ReactDOM from "react-dom/client";

/**
 * React.createRef()
 *
 *  1. 先调用 React.createRef 函数 得到一个返回值赋值给 this.xxx
 *  2. 将这个返回值做为 ref 绑定的值 ref={this.xxx}
 *  3. this.xxx.current 获取
 *          DOM对象
 *          组件的实例对象
 */
class App extends React.Component {
  // constructor(props) {
  //   super(props);

  //   this.xxx = React.createRef();
  // }

  xxx = React.createRef();

  state = {
    name: "张三",
  };

  handleClick = () => {
    console.log(this.xxx);
  };

  render() {
    return (
      <div>
        <input ref={this.xxx} type="text" />
        <h1 ref={this.xxx}>App - {this.state.name}</h1>

        <button onClick={this.handleClick}>点击修改 name</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
